<template>
  <div class="t-header" ref="header">
    <div class="logo">
       <span class="logo-img">
       </span>
      <span class="logo-text">
        RUIY
       </span>
    </div>
    <div class="nav">
      <router-link to="index" tag="div" @mousemove.prevent>首页</router-link>
      <router-link to="category" tag="div" @mousemove.prevent>分类</router-link>
      <router-link to="about" tag="div" @mousedown.prevent>归档</router-link>
      <router-link to="about" tag="div" @mousedown.prevent>关于</router-link>
    </div>
  </div>
</template>
<script>
  // const HEADER_BGCOLOR = "linear-gradient(90deg, rgba(103, 212, 177) 0px, rgb(177, 132, 218))";
  const HEADER_HEIGHT = "55px";
  export default {
    data() {
      return {
        currentLogo: 0
      }
    },
    computed: {},
    methods: {
      changeLogo() {
        var l = 2;
        var i = this.currentLogo + 1;
        i = i === l ? 0 : i;
        this.currentLogo = i;
      }
    },
    mounted() {
      // 头部导航向下滚动会变色，需要考虑移动端的问题，移动端一直是有颜色的
      let width;
      let top;

      // 兼容性的考虑
      if (window.innerWidth)
        width = window.innerWidth;
      else if ((document.body) && (document.body.clientWidth))
        width = document.body.clientWidth;
      top = window.scrollY;

      // 这个是初始化的 小于648一直是有颜色的
      if (width < 648) {
        headerShow(this.$refs.header);
      }

      window.addEventListener('resize', throttle(whenResize,this));

      window.addEventListener('scroll', throttle(whenScroll,this));

      function whenResize() {
        if (window.innerWidth)
          width = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
          width = document.body.clientWidth;
        if (width < 648) {
          headerShow(this.$refs.header);
        } else if (top <= 80) {
          headerHide(this.$refs.header);
        }
      }

      function whenScroll() {
        let topNow = window.scrollY;
        if (top < 80) {
          if(topNow>80){
            headerShow(this.$refs.header);
          }
          top = topNow;
        } else {
          if(topNow<80){
            headerHide(this.$refs.header);
            top = topNow;
            return
          }
          if (width < 648) {
            return;
          }
        }
      }

      // 显示和隐藏
      function headerShow(ele) {
        // console.log("show");
        ele.style.top = 0;
      }

      function headerHide(ele) {
        // console.log("hide");
        ele.style.top = "-" + HEADER_HEIGHT;
      }

      function throttle(fn,env) {
        let canRun = true; // 通过闭包保存一个标记 事件触发执行的函数是同一个函数 不算new的
        return function () {
          if (!canRun) return;
          canRun = false; // 立即设置为false 下一次的事件都不会触发下面的代码 直至定时器执行
          setTimeout(() => {
            fn.apply(env, arguments);
            canRun = true; //定时器执行后 才可以再次执行回调 外在表现即是一定时间执行一个回调
          }, 500);
        };
      }
    }
  }
</script>
<style lang="stylus">
  /*博客的头部*/
  .t-header
    z-index 999
    position fixed
    color header-font-color
    background header-bgcolor
    top: - header-height
    left 0
    height: header-height
    width: 100%
    transition .4s
    /*博客的logo*/
    > .logo
      cursor pointer
      height: 100%
      float: left
      img
        height: 100%
        vertical-align middle
      > span
        display inline-block
        height 100%
        vertical-align top
      > .logo-img
        padding 6px 0
      > .logo-text
        line-height header-height
        font-size 28px
        letter-spacing 2px
        font-weight 500
        font-family "hey_elsie_cuteregular"
        padding-left 14px
        color #fff
    /*博客头部的导航*/
    > .nav
      height header-height
      float: right
      > div
        cursor pointer
        color white-top-color
        width 80px
        height header-height
        float left
        line-height header-height
        font-size: 14px
        text-align center
        padding 0 10px
        transition 0.2s
        &:hover
          border-bottom 4px solid header-tag-border-color
      > .router-link-active, .router-link-active:hover
        border-bottom 4px solid header-tag-border-color

  //小于648px
  @media screen and (max-width: 648px) {
    .t-header {
      background-color header-bgcolor
      .logo {
        .logo-text {
          font-size 24px
          letter-spacing 1px
        }
      }
    }
  }

  @keyframes logo {
    /* 这个可以设置初始状态，保证多个动画执行不会出现错误 */
    /* 0%{
       transform: rotate(30deg);
     }*/
    0% {
      transform: rotate(10deg);
    }
    /* 10%{
       transform: rotate(-25deg);
     }
     20%{
       transform: rotate(20deg);
     }
     30%{
       transform: rotate(-16deg);
     }
     40%{
       transform: rotate(12deg);
     }*/
    50% {
      transform: rotate(-8deg);
    }
    /* 60%{
       transform: rotate(6deg);
     }
     70%{
       transform: rotate(-4deg);
     }
     80%{
       transform: rotate(2deg);
     }
     90%{
       transform: rotate(-1deg);
     }*/
    100% {
      /*transform: rotate(0deg);*/
      transform scale(0.9)
    }
  }
</style>
